{% extends 'base.html' %}

{% block title %}用户列表{% endblock %}

{% block page_title %}用户列表{% endblock %}

{% block breadcrumb_active %}用户管理 / 用户列表{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">用户列表</h3>
                <div class="card-tools">
                    <a href="{% url 'add_user' %}" class="btn btn-success btn-sm">
                        <i class="fas fa-plus"></i> 添加用户
                    </a>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
                <table id="usersTable" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>电子邮箱</th>
                            <th>活跃状态</th>
                            <th>管理员</th>
                            <th>超级用户</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                            <tr>
                                <td>{{ user.username }}</td>
                                <td>{{ user.first_name }} {{ user.last_name }}</td>
                                <td>{{ user.email }}</td>
                                <td>
                                    {% if user.is_active %}
                                        <span class="badge bg-success">活跃</span>
                                    {% else %}
                                        <span class="badge bg-danger">禁用</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if user.is_staff %}
                                        <span class="badge bg-primary">是</span>
                                    {% else %}
                                        <span class="badge bg-secondary">否</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if user.is_superuser %}
                                        <span class="badge bg-primary">是</span>
                                    {% else %}
                                        <span class="badge bg-secondary">否</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{% url 'edit_user' user.id %}" class="btn btn-primary btn-sm" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{% url 'delete_user' user.id %}" class="btn btn-danger btn-sm" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->
{% endblock %}

{% block extra_js %}
<script>
    $(function() {
        // 初始化表格样式（如果有需要的话）
        $('#usersTable').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Chinese.json"
            }
        });
    });
</script>
{% endblock %}